<script setup lang="ts">
//@ts-ignore
import variables from "@/styles/variables.module.scss";
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
import { randomWallApi } from '@/api/login'
console.log(variables.bgColor)
defineProps<{ msg: string }>()

const count = ref(0)
const { userInfo } = storeToRefs(useUserStore())
const userInfoHandler = () => {
  userInfo.value.name = '张三'
}
console.log(import.meta.env.VITE_APP_PORT);
function getRandomWall() {
  randomWallApi()
    .then(res => {
      console.log(res);

    })
}

</script>

<template>
  
  <h1 class="bg">{{ msg }}</h1>
  <!-- 测试svg -->
  <el-button type="info"><svg-icon icon-class="喜欢" />SVG 本地图标</el-button>
  <!-- src/components/HelloWorld.vue -->
  <!-- 测试自动按需导入 -->
  <div>
    <el-button type="success"><i-ep-SuccessFilled />Success</el-button>
    <el-button type="info"><i-ep-InfoFilled />Info</el-button>
    <el-button type="warning"><i-ep-WarningFilled />Warning</el-button>
    <el-button type="danger"><i-ep-WarnTriangleFilled />Danger</el-button>
  </div>
  <!-- 测试js引入css变量 -->
  <div style="width:100px;height:100px" :style="{ 'background-color': variables.bgColor }" />
  <!-- unocss -->
  <div class="size-1 bg-green "></div>
  <!-- 测试pinia -->
  <el-button @click="userInfoHandler"> 点我存储userInfo</el-button>
  <div>姓名{{ userInfo.name || '暂无姓名' }}</div>
  <!-- env -->
  <div>import.meta.env.VITE_APP_PORT</div>
  <!-- axios请求 -->
  <el-button @click="getRandomWall"> 点我发请求</el-button>
</template>

<style scoped lang="scss">
.read-the-docs {
  color: #888;
}

.bg {
  background-color: $bg-color;
}
</style>
